<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>连退1630平整机工艺参数优化模型</h1>
      </div>
    </div>
    <el-row class="main-container">
      <el-col :span="8">
        <el-header style="height: 10vh">
          <div class="alarm-info">
            <span class="alarm-icon">&#9888;</span>
            <span class="warning">报警信息</span>
            <div class="alarm-marquee">
              <span class="alarm-row-one-line marquee-text">
                {{ warningMessage }}
              </span>
            </div>
          </div>
        </el-header>
        <div class="arpe-ai-set-card" style="position: absolute; left: 190px; top: 290px; z-index: 11;">
          <div class="arpe-ai-set-card-title">
            <span v-if="entryAIMode == 0 || entryAIMode == 0.0" class="ai-mode-badge ai-mode-off">未启用</span>
            <span v-else-if="entryAIMode == 1 || entryAIMode == 1.0" class="ai-mode-badge ai-mode-on">已启用</span>
          </div>
        </div>
        <el-main style="height: 30vh">
          <svg-load :name="technologicalName" width="100%"></svg-load>
          <div class="steel-info-div">
            <div class="coil-div common-div-card">
              <span>卷号:&nbsp;&nbsp;{{ entId }}</span>
            </div>
            <div class="zcoiler-div common-div-card">
              <span>轧制力:&nbsp;&nbsp;{{ numberFormat1(zcoiler_remaining_length_b) }}&nbsp;&nbsp;KN</span>
            </div>
            <div class="ccoiler-div common-div-card">
              <span>窜辊:&nbsp;&nbsp;{{ numberFormat1(ccoiler_remaining_length_b) }}&nbsp;</span>
            </div>
            <div class="wcoiler-div common-div-card">
              <span>弯辊力:&nbsp;&nbsp;{{ numberFormat1(coiler_remaining_length_b) }}&nbsp;&nbsp;KN</span>
            </div>
            <div class="speed-div common-div-card">
              <span>平整机速度:&nbsp;&nbsp;{{ numberFormat1(flat_machine_speed) }}&nbsp;</span>
            </div>
            <div class="diameter-div common-div-card">
              <span>实时辊径:&nbsp;&nbsp;{{ real_roll_diameter }}&nbsp;</span>
            </div>
            <div class="roll-div common-div-card">
              <span>轧制模式:&nbsp;&nbsp;{{ roll_mode }}&nbsp;</span>
            </div>
            <div class="tentsion-front common-div-card">
              <span>前张力:&nbsp;&nbsp;{{ numberFormat1(tentsion_front) }}&nbsp;</span>
            </div>
            <div class="tentsion-back common-div-card">
              <span>后张力:&nbsp;&nbsp;{{ numberFormat1(tentsion_back) }}&nbsp;</span>
            </div>
          </div>
        </el-main>
        <el-footer style="height: 50vh">
          <new-coil-card title="钢卷信息" :class="viewportWidth == 1920 ? '' : 'base-info-125'">
            <el-table
              :data="pdiMesInfo"
              style="width: 100%"
              :header-cell-style="{ background: '#2f59af', color: '#fff' }"
              size="small"
              class="steel-info-scroll"
              ref="alarmTableRef"
            >
              <el-table-column prop="chinese" label="" />
              <el-table-column prop="currentCoil" label="当前卷" />
              <el-table-column prop="nextCoil" label="下一卷" />
            </el-table>
          </new-coil-card>
        </el-footer>
      </el-col>
      <el-col :span="8">
        <el-header style="height: 30vh">
          <new-coil-card title="AI弯辊力补偿值">
            <graph-line :data1="wrbendForceCompensation" :datax="dataTimeX" :data-name="['时间', 'AI弯辊力补偿值']" />
          </new-coil-card>
        </el-header>
        <el-main style="height: 30vh">
          <new-coil-card title="轧制力曲线">
            <graph-line :data1="rollingLevelSet" :data2="rollingForceSet" :data3="percentage_rollingforce"
              :datax="dataTimeX" :data-name="['时间', 'KN']" :legend-name="['二级设定', 'AI模型设定', '实际值']" />
          </new-coil-card>
        </el-main>
        <el-footer style="height: 30vh">
          <new-coil-card title="中间辊弯辊力曲线">
            <graph-line :data1="inbendLevelSet" :data2="inbendForceSet" :data3="percentage_inbendforce"
              :datax="dataTimeX" :data-name="['时间', 'KN']" :legend-name="['二级设定', 'AI模型设定', '实际值']" />
          </new-coil-card>
        </el-footer>
      </el-col>
      <el-col :span="8">
        <el-header style="height: 30vh">
          <new-coil-card title="板形柱状图">
            <graph-bar :data1="flatnessBar" :datax="flatnessBarx" />
          </new-coil-card>
        </el-header>
        <el-main style="height: 30vh">
          <new-coil-card title="工作弯辊力曲线">
            <graph-line :data1="wrbendLevelSet" :data2="wrbendForceSet" :data3="percentage_wrbendforce"
              :datax="dataTimeX" :data-name="['时间', 'KN']" :legend-name="['二级设定', 'AI模型设定', '实际值']" />
          </new-coil-card>
        </el-main>
        <el-footer style="height: 30vh">
          <new-coil-card title="延伸率">
            <graph-line :data1="stretch_goals" :data2="percentage_elongation" :datax="dataTimeX"
              :data-name="['时间', '延伸率']" :legend-name="['目标值', '实际值']" />
          </new-coil-card>
        </el-footer>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
import { ref, onMounted, onUnmounted, watch, onBeforeMount } from 'vue';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import { refreshSVG, initialSVG, refreshGraphical } from '/@/common/refreshSVG';
import { useUserStore } from '/@/store/modules/system/user';
import { levelingMachineApi } from '/@/api/levelingmachine/index';
import { rollingSimulationApi } from '/@/api/RollingSimulation/index';
import GraphBar from './components/GraphBar.vue';
import GraphLine from './components/GraphLine.vue';

// ------------------------------------- 目录    -------------------------------------------

const data = ref([
  {
    menuName: 'levelingmachines',
    menuTitle: '连退平整机工艺参数主页',
    menuId: '1',
  },
  { menuName: 'levelingmachineplan', menuTitle: '连退平整机工艺计划' },
  { menuName: 'historicalsetvalue', menuTitle: '历史卷轧制力，弯辊力AI设定值' },
]);

onBeforeMount(() => {
  useUserStore().setTagNav(data.value);
});

// ----------------------------------- 警告信息 -------------------------------------------

const warningMessage = ref('');

const getWarningMessage = () => {
  try {
    let param = {};
    levelingMachineApi.findEarlyWarning(param).then((res) => {
      warningMessage.value =
        '时间:' +
        res.data.data.spmSetTime +
        ' 卷号:' +
        res.data.data.coilNo +
        ' 轧制力:' +
        res.data.data.rollingForce +
        ' 工作辊弯辊力:' +
        res.data.data.workRollBend +
        ' 中间辊弯辊力:' +
        res.data.data.interMediateRollBend +
        ' 随机系数:' +
        res.data.data.followUpCoefficient;
    });
  } catch (e) {
    console.error('获取警告信息失败：' + e);
    ElMessage.error('获取警告信息失败');
  }
};

// ----------------------------------- 钢卷跟踪 -------------------------------------------

const inletLooper = ref<number>(0);
const middleLooper = ref<number>(0);
const exportLooper = ref<number>(0);
const technologicalName = 'spm';
let tr: any = null;
let por: any = null;
let ti: any = null;

const getZoneTrk = async () => {
  let param = {
    name: 'CAL1630_zonetrk',
  };

  rollingSimulationApi.rest(param).then((res) => {
    let zones = res.data.zoneno;
    entId.value = zones[83].entId;
    inletLooper.value = res.data['loop'][0];
    middleLooper.value = res.data['loop'][1];
    exportLooper.value = res.data['loop'][2];
    let trKey = `${technologicalName}-ZONE_tr${res.data.tr}`;
    let trpathKey = trKey + '_path';
    let porKey = `${technologicalName}-ZONE_por${res.data.por}`;
    let porpathKey = porKey + '_path';
    var arr = Object.keys(zones);
    /**开卷机和卷取机 */
    if (tr === null || tr !== res.data.tr) {
      tr = res.data.tr;
      refreshSVG(zones[arr.length - 1].ti % 10, trpathKey);
      refreshGraphical(zones[arr.length - 1].ti % 10, trKey);
      initialSVG(technologicalName, 'tr', res.data.tr);
    }
    if (por === null || por !== res.data.por) {
      por = res.data.por;
      if (res.data.por === 0) {
        initialSVG(technologicalName, 'por', '1');
        initialSVG(technologicalName, 'por', '2');
      }
    }
    if (ti === null || ti !== zones[0].ti) {
      ti = zones[0].ti;
      refreshSVG(zones[0].ti % 10, porpathKey);
      refreshGraphical(zones[0].ti % 10, porKey);
      initialSVG(technologicalName, 'por', res.data.por);
    }
    for (let i in zones) {
      let pathkey = `${technologicalName}-ZONE${i}`;
      refreshSVG(zones[i].ti % 10, pathkey);
    }
  });
};

const entId = ref('');
const zcoiler_remaining_length_b = ref<number>(8.0);
const ccoiler_remaining_length_b = ref<String>('DC51D');
const coiler_remaining_length_b = ref<number>(25.0);
const flat_machine_speed = ref<number>(25.0);
const real_roll_diameter = ref<string>();
const roll_mode=ref<string>();
const tentsion_front=ref<number>();
const tentsion_back=ref<number>();

async function getAIModeTableData() {
  let param = {
    name: 'CAL1630_RealData',
  };
  rollingSimulationApi.rest(param).then((res) => {
    const obj = res.data;
    zcoiler_remaining_length_b.value = obj['G426_411NI'];
    ccoiler_remaining_length_b.value = obj['G426_421NI'];
    coiler_remaining_length_b.value = obj['G426_434NI'];
    flat_machine_speed.value = obj['G1_1801NI'];
    tentsion_front.value=obj['G103_414NI'];
    tentsion_back.value=obj['G103_419NI'];
    roll_mode.value=parseInt(obj['G401_45PL_SL2'])==1?"延伸率模式":"衡轧模式"
    console.log("roll_mode.value"+obj['G401_45PL_SL2']+roll_mode.value)
    var s=1;
    if(parseInt(obj['G401_575NI'])<=400&&parseInt(obj['G401_575NI'])>=350){
      s=0
    }
    real_roll_diameter.value=s==0?"小辊径":"大辊径"
  });
}
const numberFormat1 = (number: any) => {
  return number == undefined ? '0' : Number(parseFloat(number).toFixed(0));
};

// ----------------------------------- 钢卷信息 -------------------------------------------

const pdiMesInfo = ref([
  { chinese: '卷号', currentCoil: '-', nextCoil: '-' },
  { chinese: '钢种', currentCoil: '-', nextCoil: '-' },
  { chinese: '宽度(mm)', currentCoil: '-', nextCoil: '-' },
  { chinese: '厚度(mm)', currentCoil: '-', nextCoil: '-' },
  { chinese: '轧制力AI设定值', currentCoil: '-', nextCoil: '-' },
  { chinese: '前张力设定值(低速)', currentCoil: '-', nextCoil: '-' },
  { chinese: '后张力设定值(低速)', currentCoil: '-', nextCoil: '-' },
  { chinese: '前张力设定值(中速)', currentCoil: '-', nextCoil: '-' },
  { chinese: '后张力设定值(中速)', currentCoil: '-', nextCoil: '-' },
  { chinese: '前张力设定值(高速)', currentCoil: '-', nextCoil: '-' },
  { chinese: '后张力设定值(高速)', currentCoil: '-', nextCoil: '-' },
  { chinese: '工作弯辊力AI设定值', currentCoil: '-', nextCoil: '-' },
  { chinese: '中间弯辊力AI设定值', currentCoil: '-', nextCoil: '-' },
  { chinese: '窜辊建议值', currentCoil: '-', nextCoil: '-' },
  { chinese: '置信度', currentCoil: '-', nextCoil: '-' },
  { chinese: '设定辊径', currentCoil: '-', nextCoil: '-' },
  { chinese: '轧制模式', currentCoil: '-', nextCoil: '-' },
]);

async function getSteelGradeData() {
  const param = {
    action: 'get_tags',
    operator: 'abc',
    terminal: 'FM_01',
    body: [
      {
        tagName: 'CAL1_ROLL.CoilNo',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare1',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare2',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare5',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare10',
        timestamp: 0,
      },
      {
        tagName: 'current_trust_rate',
        timestamp: 0,
      },
      {
        tagName: 'next_coil_id',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare6',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare7',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare8',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare11',
        timestamp: 0,
      },
      {
        tagName: 'next_trust_rate',
        timestamp: 0,
      },
      {
        tagName: 'low_speed_front_tension',
        timestamp: 0,
      },
      {
        tagName: 'low_speed_back_tension',
        timestamp: 0,
      },
      {
        tagName: 'mid_speed_front_tension',
        timestamp: 0,
      },
      {
        tagName: 'mid_speed_back_tension',
        timestamp: 0,
      },
      {
        tagName: 'high_speed_front_tension',
        timestamp: 0,
      },
      {
        tagName: 'high_speed_back_tension',
        timestamp: 0,
      },
    ],
  }; 
  // 不再清空数组
  levelingMachineApi.LHMI(param).then((res) => {
    let param2 = {
      entid: res.data.results[0].value,
      isLargeRollDiameter:real_roll_diameter.value=="小辊径"?0:1,
      isElongMode:roll_mode.value=="衡轧模式"?0:1
    };
    levelingMachineApi.findProcessValue(param2).then((ress: any) => {

      pdiMesInfo.value[12].currentCoil = parseFloat(res.data.results[3].value).toFixed(0);
      pdiMesInfo.value[11].currentCoil = parseFloat(res.data.results[2].value).toFixed(0);
      pdiMesInfo.value[4].currentCoil = parseFloat(res.data.results[1].value).toFixed(0);
      pdiMesInfo.value[0].currentCoil = res.data.results[0].value;
      pdiMesInfo.value[1].currentCoil = ress.data.data.steelgrade;
      pdiMesInfo.value[2].currentCoil = ress.data.data.inMatWidth;
      pdiMesInfo.value[3].currentCoil = ress.data.data.inMatThick;
      pdiMesInfo.value[13].currentCoil = res.data.results[4].value;
      pdiMesInfo.value[14].currentCoil = res.data.results[5].value;
      pdiMesInfo.value[15].currentCoil = ress.data.data.isLargeRollDiameter==0?"小辊径":"大辊径"
      pdiMesInfo.value[16].currentCoil = ress.data.data.isElongMode==0?"衡轧模式":"延伸率模式"
      pdiMesInfo.value[5].currentCoil = parseFloat(res.data.results[12].value).toFixed(0);
      pdiMesInfo.value[6].currentCoil = parseFloat(res.data.results[13].value).toFixed(0);
      pdiMesInfo.value[7].currentCoil = parseFloat(res.data.results[14].value).toFixed(0);
      pdiMesInfo.value[8].currentCoil = parseFloat(res.data.results[15].value).toFixed(0);
      pdiMesInfo.value[9].currentCoil = parseFloat(res.data.results[16].value).toFixed(0);
      pdiMesInfo.value[10].currentCoil = parseFloat(res.data.results[17].value).toFixed(0);



    });
    // let next;
    // for (let i = 82; i > 0; i--) {
    //   if (res.data['zoneno'][i]['entId'] != res.data['zoneno']['83']['entId']) {
    //     next = res.data['zoneno'][i]['entId'];
    //     break;
    //   }
    // }
    let param3 = {
      entid: res.data.results[6].value,
      isLargeRollDiameter:real_roll_diameter.value=="小辊径"?0:1,
      isElongMode:roll_mode.value=="衡轧模式"?0:1
    };
    levelingMachineApi.findProcessValue(param3).then((ress: any) => {
      pdiMesInfo.value[12].nextCoil = parseFloat(res.data.results[9].value).toFixed(0);
      pdiMesInfo.value[11].nextCoil = parseFloat(res.data.results[8].value).toFixed(0);
      pdiMesInfo.value[4].nextCoil = parseFloat(res.data.results[7].value).toFixed(0);
      pdiMesInfo.value[0].nextCoil = res.data.results[6].value;
      pdiMesInfo.value[1].nextCoil = ress.data.data.steelgrade;
      pdiMesInfo.value[2].nextCoil = ress.data.data.inMatWidth;
      pdiMesInfo.value[3].nextCoil = ress.data.data.inMatThick;
      pdiMesInfo.value[13].nextCoil = res.data.results[10].value;
      pdiMesInfo.value[14].nextCoil = res.data.results[11].value;
      pdiMesInfo.value[15].nextCoil =ress.data.data.isLargeRollDiameter==0?"小辊径":"大辊径"
      pdiMesInfo.value[16].nextCoil= ress.data.data.isElongMode==0?"衡轧模式":"延伸率模式"
      pdiMesInfo.value[5].nextCoil = parseFloat(res.data.results[12].value).toFixed(0);
      pdiMesInfo.value[6].nextCoil = parseFloat(res.data.results[13].value).toFixed(0);

      pdiMesInfo.value[7].nextCoil = parseFloat(res.data.results[14].value).toFixed(0);
      pdiMesInfo.value[8].nextCoil = parseFloat(res.data.results[15].value).toFixed(0);

      pdiMesInfo.value[9].nextCoil = parseFloat(res.data.results[16].value).toFixed(0);
      pdiMesInfo.value[10].nextCoil = parseFloat(res.data.results[17].value).toFixed(0);
    });
  });
}

// ----------------------------------- 图表相关 -------------------------------------------

// --------------- 板形柱状图 -----------------
const flatnessBar = ref<any>([]);
const flatnessBarx = Array.from({ length: 32 }, (_, i) => i + 1);

async function updateflatnessData() {
  const param = {
    name: 'CAL1630_RealData',
  };

  try {
    const res = await rollingSimulationApi.rest(param);
    const obj = res.data;

    // 生成键名数组
    const keys = Array.from({ length: 32 }, (_, i) => `G427_${(804 + i).toString().padStart(3, '0')}BR`).reverse();

    // 一次性更新所有值
    flatnessBar.value = keys.map((key) => obj[key]);
  } catch (error) {
    console.error('更新板形数据失败:', error);
  }
}

// --------------- AI弯辊力补偿值 -----------------

const wrbendForceCompensation = ref<any>([]);
const prewrbendForceCompensation = ref(0);
const entrySetValue = ref<number>(0);

const rollingForceSet = ref<any>([]);
const rollingLevelSet = ref<any>([]);
const inbendLevelSet = ref<any>([]);
const inbendForceSet = ref<any>([]);
const wrbendForceSet = ref<any>([]);
const wrbendLevelSet = ref<any>([]);
const percentage_wrbendforce = ref<any>([]);
const percentage_inbendforce = ref<any>([]);
const percentage_rollingforce = ref<any>([]);
const entryAIMode = ref<number>(0);

async function getRecForceLine() {
  let param = {
    name: 'CAL1630_RealData',
  };
  rollingSimulationApi.rest(param).then((res) => {
    rollingLevelSet.value.push(parseFloat(res.data.G401_513NI).toFixed(3));
    inbendLevelSet.value.push(parseFloat(res.data.G401_514NI).toFixed(3));
    wrbendLevelSet.value.push(parseFloat(res.data.G401_326DS_VAL).toFixed(3));
    percentage_rollingforce.value.push(parseFloat(res.data.G426_411NI).toFixed(3));
    percentage_wrbendforce.value.push(parseFloat(res.data.G426_434NI).toFixed(3));
    percentage_inbendforce.value.push(parseFloat(res.data.G401_554NI).toFixed(3));
    let rollingforce: number = res.data['G426_411NI'] - prewrbendForceCompensation.value;

    const param = {
      action: 'get_tags',
      operator: 'abc ',
      terminal: 'FM_01',
      body: [
        {
          tagName: 'CAL1_ROLL.CoilNo',
          timestamp: 0,
        },
        {
          tagName: 'cal_stm_ai_model',
          timestamp: 0,
        },
      ],
    };
    levelingMachineApi.LHMI(param).then((res:any) => {
      console.log("data" + res.data)
      entryAIMode.value = res.data.results[1].value
      let param2 = {
        entid: res.data.results[0].value,
      };

      levelingMachineApi.findProcessValue(param2).then((res:any) => {
        wrbendForceCompensation.value.push((rollingforce * res.data.data.workRollBendComp).toFixed(3));
      });
    });
    prewrbendForceCompensation.value = res.data.G426_411NI;
    console.log(res.data)
    
  });
}

async function searchButtonClick() {
  const param = {
    action: 'get_tags',
    operator: 'abc ',
    terminal: 'FM_01',
    body: [
      {
        tagName: 'CAL1_ROLL.Fspare1',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare2',
        timestamp: 0,
      },
      {
        tagName: 'CAL1_ROLL.Fspare5',
        timestamp: 0,
      },
    ],
  };

  levelingMachineApi.LHMI(param).then((res) => {
    const obj = res.data;
    rollingForceSet.value.push(obj.results[0].value.toFixed(3));
    wrbendForceSet.value.push(obj.results[1].value.toFixed(3));
    inbendForceSet.value.push(obj.results[2].value.toFixed(3));
  });
}

// --------------- 延伸率 -----------------
const percentage_elongation = ref<any>([]);
const stretch_goals = ref<any>([]);

async function getElongationData() {
  let param = {
    name: 'CAL1630_RealData',
  };
  rollingSimulationApi.rest(param).then((res) => {
    stretch_goals.value.push(Number(parseFloat(res.data['G401_583NI'])).toFixed(2));
    percentage_elongation.value.push(Number(parseFloat(res.data['spm_elongation_act'])).toFixed(2));
    // console.log(percentage_elongation.value.length);
  });
}

// ----------------------------------- 共通设定 -------------------------------------------
const dataTimeX = ref<string[]>([]);
let interval2000: any = null;
let interval500: any = null;
const viewportWidth = ref();
const viewportHeight = ref();

function fetchData() {
  try {
    interval2000 = setInterval(() => {
      getSteelGradeData();
      getZoneTrk();
      updateflatnessData();
      getRecForceLine();
      searchButtonClick();
      getElongationData();
      getAIModeTableData();
      
      dataTimeX.value.push(dayjs().format('HH:mm:ss'));
    }, 2000);
    interval500 = setInterval(() => {
      getWarningMessage();
    }, 5000);
  } catch (error: any) {
    console.error('error:' + error);
    ElMessage.error('获取数据失败');
  }
}

onMounted(() => {
  getWarningMessage();
  fetchData();
  viewportWidth.value = window.innerWidth;
  viewportHeight.value = window.innerHeight;
});

onUnmounted(() => {
  dataTimeX.value = [];
  stretch_goals.value = [];
  percentage_elongation.value = [];
  percentage_rollingforce.value = [];
  rollingLevelSet.value = [];
  rollingForceSet.value = [];
  pdiMesInfo.value = [];
  wrbendForceCompensation.value = [];
  inbendForceSet.value = [];
  inbendLevelSet.value = [];
  percentage_inbendforce.value = [];
  clearInterval(interval2000);
  clearInterval(interval500);
});

watch(
  () => {
    return dataTimeX.value.length;
  },
  () => {
    if (dataTimeX.value.length > 60) {
      dataTimeX.value.shift();
      stretch_goals.value.shift();
      percentage_elongation.value.shift();
      percentage_rollingforce.value.shift();
      rollingLevelSet.value.shift();
      rollingForceSet.value.shift();
      percentage_wrbendforce.value.shift();
      percentage_inbendforce.value.shift();
      wrbendLevelSet.value.shift();
      inbendLevelSet.value.shift();
      wrbendForceSet.value.shift();
      inbendForceSet.value.shift();
      wrbendForceCompensation.value.shift();
    }
  }
);
</script>
<style scoped lang="less">
// 表格和选择框共同样式
@border-radius: 8px;
@primary-color: #2c69e8;
@box-shadow: 0 4px 16px rgba(255, 255, 255, 0.08);
@box-shadow-hover: 0 8px 32px rgba(255, 255, 255, 0.12);
@border: 1px solid #dcdfe6;

.main-container {
  height: 90vh;
  width: 99vw;

  // ---------------------  table ---------------
  :deep(.el-table) {
    background-color: transparent !important;
    --el-table-border: none;
    --el-table-row-hover-bg-color: unset;
    color: white;
    font-size: 14px;
  }

  :deep(.el-table th),
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
  }

  :deep(.el-table__row:nth-child(odd)) {
    background-color: #223671;
  }

  :deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
  }

  :deep(.el-table) {
    .el-table__cell {
      .cell {
        align-items: center;
        text-align: center;
        white-space: nowrap; // 禁止换行
        text-overflow: ellipsis; // 溢出显示...
        line-height: 2.3;
      }
    }
  }

  // ------------------------------  select  ----------
  :deep(.el-select .el-select__wrapper) {
    background-color: rgba(41, 121, 255, 0.2) !important;
    border: 1px solid #42b4ff !important;
    box-shadow: 0 0 8px rgba(41, 121, 255, 0.5) !important;
    height: 22px !important;
    width: auto !important;
    border-radius: 3px !important;
    transition: border-color 0.2s;
  }

  :deep(.el-select .el-input__inner) {
    height: 20px !important;
    line-height: 20px !important;
    font-size: 14px !important;
    color: #fff !important;
    padding: 0 10px;
    background: transparent !important;
  }

  :deep(.el-select .el-select__caret) {
    font-size: 14px !important;
    color: #42b4ff;
  }

  :deep(.el-select .el-select__placeholder) {
    font-size: 14px !important;
    color: #a0a3a8 !important;
  }

  :deep(.el-select:hover .el-select__selected-item) {
    background-color: transparent !important;
  }

  :deep(.el-select-dropdown) {
    background-color: #142a52 !important;
    border: 1px solid #2a5caa !important;
  }

  :deep(.el-select-dropdown__item) {
    color: #a2cfff !important;
    background-color: #142a52 !important;
  }

  :deep(.el-select-dropdown__item.selected) {
    background-color: #1890ff !important;
    color: #fff !important;
  }

  :deep(.el-select-dropdown__item.hover) {
    background-color: #1e3a6d !important;
    color: #fff !important;
  }
}

.steel-info-scroll {
  height: 100%;
  :deep(.el-scrollbar__wrap) {
    max-height: 100% !important;
  }
}

// ---------------- 报警信息 --------------------
.alarm-info {
  height: 3vh;
  display: flex;
  align-items: center;
  background: #3e1b3c;
  border: 1px solid #ff4d4f;
  border-radius: 4px;
  color: #fff;
  min-width: 350px;
  max-width: 600px;
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.08);
  padding: 5px;
}

.alarm-icon {
  font-size: 20px;
  color: #ff4d4f;
}

.warning {
  color: red;
  font-size: 16px;
  width: 5vw;
  margin-left: 5px;
}

.alarm-marquee {
  overflow: hidden;
  width: 100%;
  height: 28px;
  position: relative;
  display: flex;
  align-items: center;
}

.alarm-row-one-line.ellipsis {
  display: inline-block;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  margin-top: 8px;
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
  font-size: 15px;
  font-weight: 500;
  padding-left: 10px;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

// ---------------- 钢卷跟踪信息 --------------------

.coil-div {
  position: absolute;
  left: 3vw;
  top: 6vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;
}

.zcoiler-div {
  position: absolute;
  left: 13vw;
  top: 6vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;
}

.ccoiler-div {
  position: absolute;
  left: 23vw;
  top: 6vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;
}

.wcoiler-div {
  position: absolute;
  left: 16.5vw;
  top: 14vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;
}

.tentsion-back {
  position: absolute;
  left: 10vw;
  top: 14vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;
}

.arpe-ai-set-card-title {
  color: #00eaff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 2px;
  text-shadow: 0 0 8px #00f6ff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.arpe-ai-set-card {
  width: 220px;
  min-height: 54px;
  background: linear-gradient(135deg, rgba(10, 24, 48, 0.95) 0%, rgba(0, 246, 255, 0.13) 100%);
  border: 2px solid #00f6ff99;
  border-radius: 10px;
  box-shadow:
    0 0 12px #00f6ff33,
    0 0 8px #0ff2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 10px 6px 10px;
  margin: 8px auto 0 auto;
  position: relative;
  z-index: 2;
  transition:
    box-shadow 0.25s,
    border-color 0.25s;
}

/* AI模式徽标 */
.ai-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  backdrop-filter: blur(2px);
  box-shadow: 0 0 10px rgba(0, 238, 255, 0.2) inset, 0 0 10px rgba(0, 238, 255, 0.08);
  border: 1px solid rgba(0, 238, 255, 0.25);
  transform: translateY(-1px);
  user-select: none;
}

.ai-mode-on {
  background: linear-gradient(90deg, rgba(0, 246, 255, 0.18) 0%, rgba(0, 180, 255, 0.12) 100%);
  color: #6fe3ff;
  border-color: rgba(0, 246, 255, 0.45);
  text-shadow: 0 0 8px rgba(0, 246, 255, 0.6);
}

.ai-mode-off {
  background: linear-gradient(90deg, rgba(255, 77, 79, 0.18) 0%, rgba(255, 77, 79, 0.10) 100%);
  color: #ff9a9b;
  border-color: rgba(255, 77, 79, 0.45);
  text-shadow: 0 0 8px rgba(255, 77, 79, 0.6);
}

.ai-mode-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

.ai-mode-on::before {
  background: #00eaff;
}

.ai-mode-off::before {
  background: #ff4d4f;
}

.speed-div {
  position: absolute;
  left: 22vw;
  top: 14vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;
}

.roll-div{
  position: absolute;
  left: 6vw;
  top: 10vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;

}

.tentsion-front{
  position: absolute;
  left: 5.5vw;
  top: 14vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;

}

.diameter-div{
  position: absolute;
  left: 20vw;
  top: 10vh;
  height: 3vh;
  display: flex;
  align-items: center;
  padding: 5px;
}

.common-div-card {
  box-shadow: @box-shadow;
  transition: 0.3s;
  border-radius: @border-radius;
  // border: @border;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: #063e90;
  transition: all 0.3s ease;
  cursor: pointer; // 添加指针样式

  // 悬停状态
  &:hover {
    box-shadow: @box-shadow-hover;
    transform: translateY(-5px); // 添加上浮效果
    background: lighten(#063e90, 10%); // 背景色变亮
    border-color: lighten(#dcdfe6, 20%); // 边框变亮
  }
}
</style>
